<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body{
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #222;
				color: #fff;
			}

			.clearfix {
				zoom: 1;
				/*为IE6，7的兼容性设置*/
			}

			.clearfix:after {
				content: '.';
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}

			ul li {
				list-style: none;
				float: left;
				margin: 50px 0 50px 20px;
				text-align: center;
			}

			li {
				background: #55557f;
			}

			h2 {
				margin-top: 20px;
			}

			.circle1 {
				width: 100px;
				height: 50px;
				border-radius: 50px 50px 0 0;
				line-height: 50px;
			}

			.circle2 {
				width: 50px;
				height: 100px;
				border-radius: 0 50px 50px 0;
				line-height: 100px;
			}

			.circle3 {
				width: 100px;
				height: 50px;
				border-radius: 0 0px 50px 50px;
				line-height: 50px;
			}

			.circle4 {
				width: 50px;
				height: 100px;
				border-radius: 50px 0 0 50px;
				line-height: 100px;
			}

			.circle5 {
				width: 100px;
				height: 100px;
				border-radius: 50px;
				line-height: 100px;
			}

			.demo {
				/*左半圆*/
				position: absolute;
				/*clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。*/
				width: 100px;
				height: 100px;
				border-radius: 50px;
				/* line-height: 50px; */
				clip: rect(0px 50px 100px 0px);
				/*唯一合法的形状值是：rect (top, right, bottom, left)*/
			}

			.right-circle {
				/*右半圆*/
				left: 200px;
				clip: rect(0px 100px 100px 50px);
				/*唯一合法的形状值是：rect (top, right, bottom, left)*/
			}
		</style>
	</head>
	<body>
		<div>
			<h2>1.用border-radius实现半圆</h2>
			<ul class="clearfix">
				<li class="circle1">上边圆</li>
				<li class="circle2">左边圆</li>
				<li class="circle3">下边圆</li>
				<li class="circle4">左边圆</li>
				<li class="circle5">全圆</li>
			</ul>
			<hr>
			<h2>2.css3的clip 方法剪裁实现半圆</h2>
			<p style="color: #55557f;">clip 属性剪裁绝对定位元素。也就是说，只有 position:absolute 的时候才是生效的。唯一合法的形状值是：rect (top, right,
				bottom, left)</p>
			<ul class="clearfix" style="position: relative;">
				<li class="demo">左半圆</li>
				<li class="demo right-circle">右半圆</li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
